<template>
    <div>
        <div class="body-Box ">
            <div class="bodyTop">
                <div class="lotteryType">
                    彩种类型
                    <select name="" class="selectLottery Lotterytype" v-model="lotterytype" @change="lotterytypeFn(lotterytype)">
                        <option :value="item.value" v-for="(item,index) in childrenData" :key="index">{{item.label}}</option>
                    </select>
                </div>
                <div class="lotteryType otherType">
                    投入方式
                    <select name="" class="selectLottery oneLottery" v-model="entertype"  @change="changetype">
                        <option :value="item.id" v-for="(item,index) in entertypeData" :key="index">{{item.name}}</option>
                    </select>
                </div>
                <div class="lotteryType otherType">
                    投入注数
                    <input type="text" class="selectLottery oneLottery" @change="changedata" v-model="enterdata" :readonly="this.readonly" />
                </div>
                <div class="lotteryType otherType selectbet">
                    投入期数
                    <input type="text" class="enterbet" v-model="enterbet" @change="inputbet">
                    <select name="" class="selectLottery oneLottery" v-model="enterbet">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                    </select>
                </div>
                <div class="lotteryType otherType">
                    倍数
                    <input type="text" class="selectLottery oneLottery" v-model="multiplydata" @change="changemultiply">
                </div>
                <div class="lotteryType lotterytwoType">
                    单注成本
                    <select name="" class="selectLottery twoLottery">
                        <option value="10">2元</option>
                    </select>
                </div>
                <div class="lotteryType lotterythreeType">
                    奖金模式
                    <input type="text" class="selectLottery bonus" v-model="bonusdata" @change="bonuschange">
                    <select name="" class="selectLottery oneLottery" v-model="bonusdata">
                        <option value="1800">1800</option>
                        <option value="1850">1850</option>
                        <option value="1900">1900</option>
                        <option value="1950">1950</option>
                        <option value="2000">2000</option>
                    </select>
                </div>
                <div class="lotteryType lotterythreeType">
                    <el-checkbox v-model="checked">收益累计不低于
                        <input type="text" style=" padding: 0;" class="percentage rate" v-model="ratedata" @change="percentdata">
                        <select class="percentage" v-model="ratedata">
                            <option value="30">30</option>
                            <option value="50">50</option>
                            <option value="80">80</option>
                            <option value="100">100</option>
                            <option value="150">150</option>
                            <option value="200">200</option>
                            <option value="300">300</option>
                            <option value="500">500</option>
                        </select>
                        %
                    </el-checkbox>
                </div>
                <div class="calculation calculationactive" @click="calculation">计算</div>
                <div class="calculation clearcalculation" @click="cleardata">清空</div>
            </div>
            
            <div class="table">
                <public-table :tabletitleData="resultdata" :tableData="tabledata"></public-table>
            </div>
        </div>
    </div>
</template>
<script>
import PublicTable from '../Table'
export default {
    components:{
        PublicTable
    },
    data() {
      return {
        checked: false,   //累计收益选框
        enterdata:1,     //投入注数
        lotterytype:1,
        entertype:38,     //投入方式
        entertypeData:'',    //投入方式数据
        enterbet:"10",       //投入期数
        multiplydata:"1",    //倍数
        bonusdata:"1800",    //奖金模式
        ratedata:10,         //收益累计
        readonly: false,
        resultdata:[
            {
                title:"periods",
                name:"期数"
            },
            {
                title:"multiply",
                name:"倍数"
            },
            {
                title:"cost",
                name:"本期投入（元）"
            },
            {
                title:"total_cost",
                name:"累计投入（元）"
            },
            {
                title:"bonus",
                name:"收益（元）"
            },
            {
                title:"profit",
                name:"利润（元）"
            },
            {
                title:"rate",
                name:"利润率（%）"
            }
        ],                   //表格表头数据
        tabledata:[],        //表格数据
        childrenData:[]      //彩种类型数据
      }
    },
    computed:{
        gettab_id(){
           return this.$store.state.tabsId?this.$store.state.tabsId: 5
        },
        lotteryid(){
            return this.$store.state.lottery_id
        }
    },
    watch:{
        gettab_id(){
            this.getLotterEnterData()
        },
        lotterytype(){
            this.cleardata()
            this.getLotterEnterData()
        }
    },
    created(){
        this.getLotterEnterData();
    },
    methods:{
        getdataType(){
            if(! /^\d+$/.test(this.value)){
                this.value='';
            }
        },
        //获取彩种类型和投入方式数据
        getLotterEnterData(){
            this.https("index/getObtainLotteryList").then(data=>{
                var arr = [];
                data.forEach(item=>{
                    var newarr = item.children;
                    newarr.forEach(item=>{
                        arr.push(item);
                    })
                })
                this.childrenData=arr;
            })
            this.https("Index/getClientHomeSecondMenu",{lottery_id:this.lotterytype,id:this.gettab_id}).then(data=>{
                 this.entertypeData=data;
            })
        },
        lotterytypeFn(value){
            this.lotterytype = value
        },
        //投入方式
        changetype:function(){
            // console.log(this.entertype)
            if(this.entertype==43){
                this.enterdata=1;
                this.readonly = true
            } else {
                this.readonly = false
            }
        },
        //投入注数
        changedata:function(){
            if(this.enterdata<1||this.enterdata>10000){
                this.enterdata=10000;
            }
            if(! /^\d+$/.test(this.enterdata)){
                this.enterdata=1;
            }
        },
        //投入期数
        inputbet(){
            if(this.enterbet<1||this.enterbet>50){
                this.enterbet=50;
            }
            if(! /^\d+$/.test(this.enterbet)){
                this.enterbet=10;
            }
        },
        //倍数
        changemultiply:function(){
            if(this.multiplydata<1||this.multiplydata>10000){
                this.multiplydata=1;
            }
            if(! /^\d+$/.test(this.multiplydata)){
                this.multiplydata=1;
            }
        },
        //奖金
        bonuschange(){
            if(this.bonusdata<1800||this.bonusdata>2000){
                this.bonusdata=2000;
            }
            if(! /^\d+$/.test(this.bonusdata)){
                this.bonusdata=1800;
            }
        },
        //收益率
        percentdata(){
            if(this.ratedata<1||this.ratedata>500){
                this.ratedata=500;
            }
            if(! /^\d+$/.test(this.ratedata)){
                this.ratedata=10;
            }
        },
        //计算
        calculation(){
            if(this.checked==false){
                var params = {
                    lottery_id:this.lotterytype,
                    play_id:this.entertype,
                    bet:this.enterdata,
                    multiply:this.multiplydata,
                    periods:this.enterbet,
                    bonus:this.bonusdata,
                }
            }else if(this.checked==true){
                var params = {
                    lottery_id:this.lotterytype,
                    play_id:this.entertype,
                    bet:this.enterdata,
                    multiply:this.multiplydata,
                    periods:this.enterbet,
                    bonus:this.bonusdata,
                    rate: this.ratedata
                }
            }
            this.https("index/postObtainMultiplyData", params,'post').then(data=>{
                this.tabledata=data;
            })
            
        },
        //清空
        cleardata(){
            // this.lotterytype=this;
            this.entertype=38;
            this.enterdata=10;
            this.enterbet=10;
            this.multiplydata=1;
            this.bonusdata=1800;
            this.ratedata=10;
            this.checked=false;
            this.tabledata=[];
        }
    }
}
</script>
<style scoped>
    @import url(../../assets/css/index/indexcalculation.less);
</style>
<style>
.body-Box .el-checkbox__label{
    padding-left:0.07rem;
    font-size:0.12rem;
    font-weight: bold; 
}
.body-Box .el-checkbox,.el-checkbox__input.is-checked+.el-checkbox__label{
    color:#333333;
}
.body-Box .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #e52a20;
    border-color: #e52a20;
}
.body-Box .el-checkbox__inner:hover{
    border-color: #e52a20;
}
.body-Box .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #e52a20;
}
</style>


